/************************总容器**************************/
.wrapper{
    width: 100%;
    height: 100%;
    background-color: #FFE337;
}
/************************header**************************/
.wrapper .fixed-top {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
.wrapper .fixed-top header {
    width: 100%;
    height: 8vw;
    background-color: #FFE337;

    display: flex;
    align-items: end;
}
.wrapper .fixed-top header img{
    width: 4vw;
    height: 4vw;
    margin: 0 0 0 3vw;
}
.wrapper .fixed-top header .location-text{
    margin: 0 1vw;  /*上 右 下 左*/

    font-size: 3.5vw;
    font-weight: 500;
    color: #0E0000;
}
/************************search**************************/
.wrapper .fixed-top .search{
    width: 100%;
    height: 13vw;
}
.wrapper .fixed-top .search .search-fixed-top{
    width: 100%;
    height: 13vw;
    background-color: #FFE337;

    display: flex;
    justify-content: space-between;
    align-items: center;

    box-sizing: border-box;
    padding: 0 0 0 3vw;
}
.wrapper .fixed-top .search .search-fixed-top .search-box{
    width: 85%;
    height: 9vw;
    background-color: white;
    border-radius:  50px;  /*圆角*/

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 1vw;
    font-size: 3.5vw;
    font-weight: 540;
    color: #1C1C1C;
    user-select: none;   /*让文本选中无效*/
}
.wrapper .fixed-top .search .search-fixed-top .search-box .search-box-left {
    padding: 0 0 0 4vw;
}
.wrapper .fixed-top .search .search-fixed-top .search-box .search-box-right{
    padding: 1.5vw 4vw;
    background-color: #FFE337;
    border-radius:  50px;
}
.wrapper .fixed-top .search .search-fixed-top .scan {
    width: 15%;
    height: 9vw;

    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper .fixed-top .search .search-fixed-top .scan img {
    width: 7vw;
    height: 7vw;
}

/************************点餐分类**************************/
.wrapper .food-type{
    width: 100%;
    height: 52vw;
    margin-top: 21vw;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.wrapper .food-type li{
    width: 18vw;
    height: 20vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    user-select: none;
    cursor: pointer;
}
.wrapper .food-type li img{
    width: 12vw;
    height: 12vw;
}
.wrapper .food-type li p{
    font-size: 3.2vw;
    color: #505050;
    font-weight: 540;
}

/************************推荐列表**************************/
.wrapper .list-top {
    width: 100%;
    height: 10vw;
    background: linear-gradient(#FFFFFF, #F4F4F4);
}
.wrapper .list{
    width: 100%;
    padding-bottom: 13vw;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;

    background-color: #F4F4F4;
}
.wrapper .list li{
    width: 47%;
    border: solid 1px #F4F4F4;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;

    margin: 1vw;
    border-radius:  8px;  /*圆角*/
    background: white;
}
.wrapper .list .class1 {
    background: radial-gradient(circle at 0% 0%, #FFFCD3 , white 20%);
}
.wrapper .list .class1 .head {
    width: 100%;
    height: 7vw;

    margin: 1vw 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.wrapper .list .class1 .head .title{
    font-size: 3.5vw;
    color: #33322D;
    font-weight: 550;
    padding: 0 2vw;
}
.wrapper .list .class1 .head .tag {
    font-size: 3vw;
    color: white;

    padding: 0 1vw;
    background-color: #FC891C;
    border-radius:  3px;  /*圆角*/
}
.wrapper .list .class1 .photograph {
    width: 21vw;
    height: 26vw;
    margin-bottom: 2vw;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.wrapper .list .class1 .photograph img {
    width: 20vw;
    height: 20vw;
}
.wrapper .list .class1 .photograph .text {
    display: flex;
    justify-content: center;
    align-items: end;
}
.wrapper .list .class1 .photograph .text .c1 {
    color: #FF2D1A;
    font-size: 3vw;
    padding-bottom: 0.3vw;
}
.wrapper .list .class1 .photograph .text .c2 {
    color: #FF2D1A;
    font-size: 4vw;
}
.wrapper .list .class1 .photograph .text .c3 {
    color: #FF2D1A;
    font-size: 3vw;
    padding-bottom: 0.3vw;
}
.wrapper .list .class1 .photograph .text .c4 {
    color: #666666;
    font-size: 3vw;
    padding-bottom: 0.3vw;
}

.wrapper .list .class4 {
    background: radial-gradient(circle at 0% 0%, #FEEEEE , white 20%);
}
.wrapper .list .class4 .head {
    width: 100%;
    height: 7vw;

    margin: 1vw 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.wrapper .list .class4 .head .title{
    font-size: 3.5vw;
    color: #33322D;
    font-weight: 550;
    padding: 0 2vw;
}
.wrapper .list .class4 .head .tag {
    font-size: 3vw;
    color: white;

    padding: 0 1vw 0.3vw 1vw;
    background-color: #FE5143;
    border-radius:  3px;  /*圆角*/
}
.wrapper .list .class4 .photograph1 {
    width: 47vw;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.wrapper .list .class4 .photograph1 img {
    width: 43vw;
    height: 43vw;
    margin-bottom: 1vw;
}
.wrapper .list .class4 .photograph1 p {
    font-size: 3.8vw;
    font-weight: 500;
}
.wrapper .list .class4 .photograph1 .text1 {
    display: flex;
    justify-content: center;
    align-items: end;
    margin-right: 20vw;
    margin-bottom: 0.9vw;
}
.wrapper .list .class4 .photograph1 .text1 .c1 {
    color: #FF2D1A;
    font-size: 3.5vw;
    padding-bottom: 0.3vw;
}
.wrapper .list .class4 .photograph1 .text1 .c2 {
    color: #FF2D1A;
    font-size: 4.5vw;
}
.wrapper .list .class4 .photograph1 .text1 .c3 {
    color: #FF2D1A;
    font-size: 3.5vw;
    margin-right: 1vw;
    padding-bottom: 0.3vw;
}
.wrapper .list .class4 .photograph1 .text1 .c4 {
    color: #666666;
    font-size: 3.5vw;
    font-weight: 500;
    text-decoration: line-through;
    margin-right: 2vw;
    padding-bottom: 0.3vw;
}
.wrapper .list .class4 .photograph1 .text1 .c5 {
    font-size: 3vw;
    color: #FF2D1A;
    background-color: #FFF1F0;
    border-radius: 5px;
    padding: 0.1vw 0.4vw;
    margin-bottom: 0.6vw;
}

.wrapper .list .class2 {
    background: radial-gradient(circle at 0% 0%, #FDEBF7 , white 20%);
}
.wrapper .list .class2 .head {
    width: 100%;
    height: 7vw;
    margin: 1vw 0;

    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.wrapper .list .class2 .head .title{
    font-size: 3.5vw;
    color: #33322D;
    font-weight: 550;
    padding: 2vw;
}
.wrapper .list .class2 .head .tag {
    font-size: 3vw;
    color: #FE3375;
    font-weight: 500;

    padding-right: 1vw;
    background-color: #FFEDF3;
    border-radius:  3px;  /*圆角*/

    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.wrapper .list .class2 .head .tag i {
    color: white;
    background-color: #FE3375;
    padding: 0.5vw;
    margin-right: 1vw;
    border-radius:  5px;  /*圆角*/
}
.wrapper .list .class2 img {
    width: 47vw;
    height: 47vw;
    border-radius:  6px;  /*圆角*/
}
.wrapper .list .class3 img {
    width: 47vw;
    height: 47vw;
    border-radius:  6px;  /*圆角*/
    margin-bottom: 2vw;
}
.wrapper .list .class3 .text {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    padding-left: 2vw;
}
.wrapper .list .class3 .text .name {
    font-size: 3.6vw;
    font-weight: 540;
    margin-bottom: 0.5vw;
}
.wrapper .list .class3 .text .score {
    color: #999999;
    font-size: 3vw;
    margin-bottom: 1.5vw;
}
.wrapper .list .class3 .text .discount {
    margin-bottom: 2vw;
    font-size: 2.8vw;
}
.wrapper .list .class3 .text .discount .shenquan{
    background: linear-gradient(to right, #FD6732, #D743A5);
    -webkit-background-clip: text;
    color: transparent;
    border: solid 1px #F9E4E3;
    border-radius: 5px;
    font-weight: 550;
    padding: 0 1vw;
}
.wrapper .list .class3 .text .discount span {
    color: red;
    border: solid 1px #F9E4E3;
    padding: 0 0.5vw;
}
/************************底部菜单**************************/
.wrapper .footer{
    width: 100%;
    height: 13vw;
    border-top: solid 1px #DDD;
    background-color: #fff;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    justify-content: space-around;
    align-items: center;
}
.wrapper .footer li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: #999;
    user-select: none;
    cursor: pointer;
}
.wrapper .footer li p{
    font-size: 2.8vw;
}
.wrapper .footer .bottom1 img{
    width: 5vw;
    height: 5vw;
}
.wrapper .footer .bottom2 img{
    width: 7vw;
    height: 7vw;
}
.wrapper .footer .bottom1 {
    margin-left: -1vw;
    background-color: #FFE337;
    border-radius:  50px;  /*圆角*/
    padding: 1vw 2.3vw;
}
.wrapper .footer .bottom1 +li{
    margin-left: -2vw;
}

















